<script setup>
</script>

<template>
  <div class="vip-center">
    <div class="app-content-center">
      <div class="vip-header">
        <div>
          <div
            
          ><i class="iconfont icon-renwu" style="font-size: 40px; color:#1abc9c"></i></div>
          <div
             style="
              font-size: 25px;
              color: #1abc9c;
              font-weight: 800;
              margin-top: 0px;
            "
          >做任务，领奖励</div>
        </div>
        <div>
          <div>我的积分</div>
          <div
            style="
              font-size: 30px;
              color: #1abc9c;
              font-weight: 800;
              margin-top: 20px;
            "
          >
            1000
          </div>
        </div>
        <div>
          <div>邀请好友</div>
          <div
            style="
              font-size: 30px;
              color: #1abc9c;
              font-weight: 800;
              margin-top: 20px;
            "
          >
            1000
          </div>
        </div>
      </div>
       <div class="vip-center-task-center-box">
          <titleComponent title="新手任务" :is="false" />
          <div class="vip-task-center">
            <div class="vip-task-center-item">
              <div>
                <div style="font-size: 16px">完场首次登录</div>
                <div style="color: #aaa; margin-top: 10px">积分 +5</div>
              </div>

              <div class="vip-task-btn">去做任务</div>
            </div>
          </div>
        </div>
         <div class="vip-center-task-center-box">
          <titleComponent title="任务中心" :is="false" />
          <div class="vip-task-center">
            <div class="vip-task-center-item">
              <div>
                <div style="font-size: 16px">完场首次登录</div>
                <div style="color: #aaa; margin-top: 10px">积分 +5</div>
              </div>

              <div class="vip-task-btn">去做任务</div>
            </div>
          </div>
        </div>
    </div>
  </div>
</template>

<style lang="scss">
.vip-center {
  .vip-header {
    padding: 50px;
    display: flex;
    background-color: #fff;
    justify-content: space-around;
    align-items: center;
    margin: 20px 0;
    text-align: center;
  }

  .vip-center-task-center-box {
    padding: 50px 0;
    .vip-task-center {
      .vip-task-center-item {
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        padding: 30px 50px;
        align-items: center;

        .vip-task-btn {
          padding: 10px 40px;
          background-color: #1abc9c;
          color: #fff;
        }
      }
    }
  }
}
</style>
